<template>
    <div cclass="app-container">
        <br>
         <el-form label-width="120px">
            <el-form-item label="讲师名称">
                <el-input v-model="teacher.name"/>
            </el-form-item>
            <el-form-item label="讲师排序">
                <el-input-number v-model="teacher.sort" controls-position="right" />
            </el-form-item>
            <el-form-item label="讲师头衔">
                <el-select v-model="teacher.level" clearable placeholder="请选择">
                <el-option :value="1" label="高级讲师"/>
                <el-option :value="2" label="首席讲师"/>
                </el-select>
            </el-form-item>
            <el-form-item label="讲师资历">
                <el-input v-model="teacher.career"/>
            </el-form-item>
            <el-form-item label="讲师简介">
                <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
            </el-form-item>

            <!-- 讲师头像：TODO -->
            <!-- 讲师头像 -->
            <el-form-item label="讲师头像">
                <!-- 头衔缩略图 -->
                <pan-thumb :image="teacher.avatar"/>
                <!-- 文件上传按钮 -->
                <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
                </el-button>
                <!--
                    v-show：是否显示上传组件
                    :key：类似于id，如果一个页面多个图片上传控件，可以做区分
                    :url：后台上传的url地址
                    @close：关闭上传组件
                    @crop-upload-success：上传成功后的回调 
                        <input type="file" name="file"/>
                 -->
                <image-cropper
                                v-show="imagecropperShow"
                                :width="300"
                                :height="300"
                                :key="imagecropperKey"
                                :url="'http://localhost:9001/eduoss/fileoss'"
                                field="file"
                                @close="close"
                                @crop-upload-success="cropSuccess"/>
            </el-form-item>         

            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// 引入调用teacher.js
import teacherApi from '@/api/edu/teacher'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'


export default {
    components:{ImageCropper,PanThumb},
    // 核心代码
    data() {
        return {
          teacher:{
            name: '',
            sort: 0,
            level: 1,
            career: '',
            intro: '',
            avatar:'https://lh1.hetaousercontent.com/img/4de383002f693eaa.jpg?thumbnail=true'
          },
          saveBtnDisabled:false,
          imagecropperKey:0,
          imagecropperShow:false
        }
    },
    created() {
        this.init()
    },
    // 监听
    watch:{
        // 路由变化方式 路由变化，方法执行
        $route(to,from){
            this.init()
        }
    },
    methods: {
        // 关闭上传弹框
        close(){
            this.imagecropperShow=false
            this.imagecropperKey = this.imagecropperKey+1
        },
        // 上传成功的方法
        cropSuccess(data){
             this.imagecropperShow=false
            // 上传后接口返回图片地址
             this.teacher.avatar = data.url
             this.imagecropperKey = this.imagecropperKey+1
        },
        init(){
            // 判断路径是否有 id
            if(this.$route.params && this.$route.params.id){
                const id = this.$route.params.id
                this.getTeacherInfo(id)
            }else{
                this.teacher = {}
            }
        },
        getTeacherInfo(id){
            teacherApi.getTeacherById(id)
            .then(response =>{
                this.teacher = response.data.teacher
            })  
        },
        saveOrUpdate(){
            // 判断修改 或 添加 根据teacher是否有id
            if(!this.teacher.id){
                // 添加
                this.addTeacher()
            }else{
                // 修改
                this.updateTeacher()
            }
        },
        // 修改讲师
        updateTeacher(){
            teacherApi.updateTeacher(this.teacher)
            .then(response => {
                  // 添加成功提示
                this.$message({ 
                    type: 'success',
                    message: '修改成功!'
                });
                // 返回列表 路由跳转
                this.$router.push({path:'/teacher/table'})
            })
        },

        // 添加讲师
        addTeacher(){
            teacherApi.addTeacher(this.teacher)
            .then(response => {
                // 添加成功提示
                this.$message({ 
                    type: 'success',
                    message: '添加成功!'
                });
                // 返回列表 路由跳转
                this.$router.push({path:'/teacher/table'})
            })
        }
    }
}
</script>